<template>
  <div>
    <div style="margin: 20px 0;">
      <el-button type="primary" @click="addDistributor">新建</el-button>
    </div>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column label="编号" width="55" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column label="运送承包方" width="120" align="center">
      </el-table-column>
      <el-table-column prop="name" label="地址" width="120" align="center">
      </el-table-column>
      <el-table-column prop="address" label="联系人" show-overflow-tooltip align="center">
      </el-table-column>
      <el-table-column prop="value" label="电话" align="center">
      </el-table-column>
       <el-table-column prop="value" label="备注" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" width="120">
        <template v-slot="scope">
          <el-button size="mini" type="text" @click="editTable(scope.row)">编辑</el-button>
          <el-button size="mini" type="text" @click="deleteTable(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
 <el-pagination background
                   layout="prev, pager, next, sizes, total, jumper"
                   :page-sizes="[5, 10, 15, 20]"
                    :page-size="pagesize"
                    :total="this.tableData.length"
                    @current-change="handleCurrentChange"
                   @size-change="handleSizeChange">
    </el-pagination>
     <!-- 添加或修改定时任务对话框 -->
    <el-dialog :title="title" :visible.sync="distributorOpen" width="780px" :before-close="handleClose" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="编号" prop="cronExpression">
               <el-input v-model="form.remark" placeholder="请输入编号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运送承包方" prop="misfirePolicy">
              <el-input v-model="form.remark" placeholder="请输入运送承包方" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地址" prop="concurrent">
               <el-input v-model="form.remark" placeholder="请输入地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="concurrent">
               <el-input v-model="form.remark" placeholder="请输入联系人"  />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="concurrent">
               <el-input v-model="form.remark" placeholder="请输入电话" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入备注" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="submitLoading" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "DistributorMaintenance",
  components: {},
  props: {},
  data() {
    return {
      title:"新建",
      pagesize: 10,
      currpage: 1,
      submitLoading:false,
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '0',
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '0',
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '0',
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '0',
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '1',
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '1',
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '1',
        },
      ],
      distributorOpen:false,
      form:{

      },
      rules:{}
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    handleClose(){

    },
    // 弹框取消
    cancel(){
      this.distributorOpen=false
    },
    // 弹框提交
    submitForm(){

    },
    addDistributor() {
      console.log('新建')
      this.distributorOpen=true
    },
    deleteTable(val) {
      console.log(val, '删除')
    },
    resetPassword(val) {
      console.log(val)
    },
    editTable(val) {
      this.distributorOpen=true
      this.title='编辑'
    },
    
     // 切换页 方法
      handleCurrentChange(cpage) {
        this.currpage = cpage;
      },
      handleSizeChange(psize) {
        this.pagesize = psize;
      },
  },
};
</script>

<style scoped lang="scss"></style>
